<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改用户</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: auto;
        }

        body {
            background: url(images/3.jpg) no-repeat 100% 100%;
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: center;">修改用户</h3>
    <div class="form-group">
        <label for="username">登录名：</label>
        <input type="text" class="form-control" id="username" name="username" readonly="readonly"/>
    </div>

    <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"/>
    </div>

    <div class="form-group">
        <label>性别：</label>
        <input id="man" type="radio" name="sex" value="男" checked="checked"/>男
        &nbsp;&nbsp;&nbsp;
        <input id="women" type="radio" name="sex" value="女"/>女
    </div>

    <div class="form-group">
        <label for="age">年龄：</label>
        <input type="number" class="form-control" id="age" name="age" placeholder="请输入年龄"/>
    </div>

    <div class="form-group">
        <label for="address">籍贯：</label>
        <select name="address" id="address" class="form-control">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="成都">成都</option>
            <option value="杭州">杭州</option>
            <option value="重庆">重庆</option>
            <option value="西安">西安</option>
            <option value="武汉">武汉</option>
            <option value="沧州">沧州</option>
        </select>
    </div>

    <div class="form-group">
        <label for="qq">QQ：</label>
        <input type="text" id="qq" class="form-control" name="qq" placeholder="请输入QQ号码"/>
    </div>

    <div class="form-group">
        <label for="email">Email：</label>
        <input type="text" id="email" class="form-control" name="email" placeholder="请输入邮箱地址"/>
    </div>

    <div class="form-group">
        <label for="email">超级管理员：</label>
        <input id="admin_yes" type="radio" disabled="disabled" name="isadmin" value="1"/>是
        &nbsp;&nbsp;&nbsp;
        <input id="admin_no" type="radio" disabled="disabled" name="isadmin" value="0" checked="checked"/>否
    </div>

    <div class="form-group" style="text-align: center">
        <input id="btn_sub" class="btn btn-primary" type="button" value="提交" onclick="mysub()"/>
        <input id="btn_reset" class="btn btn-box" type="button" value="重置" onclick="location.href=location.href"/>
        <input id="btn_back" class="btn btn-default" type="button" value="返回" onclick="location.href='list.html'"/>
    </div>

</div>
</body>
<script>

    // 获取参数
    function getParam(key) {
        // 得到当前url中的参数 ?uid=xxx
        var params = location.search;
        params = params.substring(1); // uid=xxx
        var paramArr = params.split("&");
        for (var i = 0; i < paramArr.length; i++) {
            var item = paramArr[i].split("=");
            if (item[0] == key) {
                return item[1];
            }
        }
        return null;
    }

    var uid = getParam("uid");
    if (uid != null && uid > 0) {
        // 查询用户的详情进行展示
        jQuery.getJSON("/user/getuser", {"uid": uid}, function (result) {
            if (result != null && result.status == 0 && result.data.id > 0) {
                // 查询用户信息成功
                var userinfo = result.data;
                jQuery("#username").val(userinfo.username);
                jQuery("#name").val(userinfo.name);
                if (userinfo.sex == "男") {
                    jQuery("#man").attr("checked", "checked");
                } else if (userinfo.sex == "女") {
                    jQuery("#women").attr("checked", "checked");
                }
                jQuery("#age").val(userinfo.age);
                jQuery("#address").val(userinfo.address);
                jQuery("#qq").val(userinfo.qq);
                jQuery("#email").val(userinfo.email);
                if (userinfo.isadmin == 0) {
                    jQuery("#admin_no").attr("checked", "checked");
                } else if (userinfo.isadmin == 1) {
                    jQuery("#admin_yes").attr("checked", "checked");
                }
            } else {
                alert("查询失败，请重试！");
            }
        });
    } else {
        alert("无效参数");
        // todo:可以实现后续跳转（如：列表页 || 登录页）
    }

    function mysub() {
        // 1.非空效验
        var name = jQuery("#name");
        var age = jQuery("#age");
        var qq = jQuery("#qq");
        var email = jQuery("#email");
        if (name.val().trim() == "") {
            alert("请先输入姓名！");
            name.focus();
            return false;
        }
        if (age.val().trim() == "") {
            alert("请先输入年龄！");
            age.focus();
            return false;
        }
        if (qq.val().trim() == "") {
            alert("请先输入QQ！");
            qq.focus();
            return false;
        }
        if (email.val().trim() == "") {
            alert("请先输入电子邮箱！");
            email.focus();
            return false;
        }
        // 提交数据到后端
        jQuery.getJSON("/user/update", {
            "id": uid,
            "name": name.val().trim(),
            "sex": jQuery("input[name=sex]:checked").val(),
            "age": age.val().trim(),
            "address": jQuery("#address").val(),
            "qq": qq.val().trim(),
            "email": email.val().trim(),
            "isadmin": jQuery("input[name=isadmin]:checked").val()
        }, function (result) {
            if (result != null && result.status == 0 && result.data > 0) {
                // 操作成功
                alert("恭喜：修改成功！");
                // todo:返回到列表页
            } else {
                alert("抱歉：修改失败，" + result.message);
            }
        });
    }

</script>
</html>